<template>
	<div class="find-goodsShelf mescroll" id="mescroll" style="height: 100%;">
		<div v-if="oversea" class="goods-box" ref='goodsKinds'>
			<div class='goods-warp els' v-for="(item, index) in shelf" :class="[shelfIndex == index?'active':'']" @click="checkStatus(item, index)">{{item.displayName}}</div>
		</div>
		<div class="position-img">
			<img v-show="bannerImgUrl" :src="bannerImgUrl" />
		</div>
		<div class="find-box hot-day">
			<div class="hot">
				<ul class="hot-goods">
					<li class="hot-item" v-for="(item, index) in goodItem" :key="index" @click="toGoodsDetail(item)">
						<div class='labs flex flex-r flex-item-v-center'>
					        <span class='flex flex-item-center' v-for="(itemi,index) in item.goodsLabels"  v-bind:style='{backgroundColor: itemi.labelBackColor,color:itemi.labelColor}'>{{itemi.labelName}}</span>
					    </div>
						<div class="img-box">
							<img :src="item.attaUrl" />
						</div>
						<div class="info-box">
							<div class="title ecs ecs-2">{{item.goodsName}}</div>
							<div class="goods-content">
								<div class="base-price">
									月供:<span class="base-price-span">￥{{item.installmentAmount|fixedTwo()}}</span>
								</div>
								<div class="base-price">
									现价:￥{{item.price|fixedTwo()}}
								</div>
								<div class="base-price line">
									市场价:￥{{item.basePrice|fixedTwo()}}
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import http from '@/util/http'
	import Api from '@/util/api'
	import mScroll from 'mescroll';
	import "mescroll/src/mescroll.min.css";
	export default {
		data() {
			return {
				shelfIndex: 0,
				oversea: false,
				shelf: [],
				pageNum: 1,
				groupId: -12,
				goodItem: [],
				bannerImgUrl: ''
			}
		},
		methods: {
			checkStatus(item, index) {
				this.shelfIndex = index;
				if(index == 0) {
					this.$refs.goodsKinds.scrollLeft = 0;
				} else if(index > 0) {
					var self = this;
					let totalLeft =self.$refs.goodsKinds.scrollLeft - index * 187 * window.innerWidth / 750;
					let dir = self.$refs.goodsKinds.scrollLeft- (index-1) * 187 * window.innerWidth / 750
					function scrollAnmial () {
						if (dir > 0) {//右滚动
							self.$refs.goodsKinds.scrollLeft -= (totalLeft+180 * window.innerWidth / 750)/10
						}else{//左滚动
							self.$refs.goodsKinds.scrollLeft -= (totalLeft+180 * window.innerWidth / 750-10)/10
						}
					}
					let interval = setInterval(scrollAnmial,30)
					setTimeout(function(){
						clearInterval(interval)
					},300)
					
//					this.$refs.goodsKinds.scrollLeft = (index - 1) * (187 * window.innerWidth / 750);
				}
				this.groupId = this.shelf[index].groupId;
				this.mescroll.triggerDownScroll();
			},
			downCallback() {
				this.pageNum = 1;
				http.post(Api.queryGroupGoods, {
					numPerPage: 4,
					order: "desc",
					pageNum: this.pageNum,
					groupId: this.groupId
				}).then(res => {
					this.goodItem = res.data.rows;
				})
				this.mescroll.endDownScroll(false);
				this.mescroll.endUpScroll(false);
				this.mescroll.lockUpScroll(false);
			},
			upCallback() {
				this.pageNum++;
				http.post(Api.queryGroupGoods, {
					groupId: this.groupId,
					numPerPage: 4,
					order: "asc",
					pageNum: this.pageNum
				}).then(res => {
					this.goodItem = [...this.goodItem, ...res.data.rows];
					this.mescroll.endUpScroll(false)

					if(this.goodItem.length == res.data.total) {
						this.mescroll.endUpScroll(true);
						this.mescroll.lockUpScroll();
					}
				})
			},
			toGoodsDetail(item) {
				this.$router.push("/goods?id=" + item.id);
			}
		},
		created: function() {
			this.$vux.loading.show({
				text: '加载中'
			})
			if(this.$route.query.self) {
				http.post(Api.queryShelfDetail, {
					shelfItemId: this.$route.query.itemId
				}).then(res => {
					this.bannerImgUrl = res.data[0].bannerImgUrl;
					this.groupId = this.$route.query.shelfItemId;
					http.post(Api.queryGroupGoods, {
						numPerPage: 4,
						order: "desc",
						pageNum: this.pageNum,
						groupId: this.groupId
					}).then(res => {
						this.$vux.loading.hide();
						this.goodItem = res.data.rows;
					})
				})
			} else {
				this.oversea = true;
				http.post(Api.queryShelfDetail, {
					shelfItemId: this.$route.query.shelfItemId
				}).then(res => {
					this.bannerImgUrl = res.data[0].bannerImgUrl;
					this.shelf = res.data;
					this.groupId = res.data[0].groupId;
					http.post(Api.queryGroupGoods, {
						numPerPage: 4,
						order: "desc",
						pageNum: this.pageNum,
						groupId: this.groupId
					}).then(res => {
						this.$vux.loading.hide();
						this.goodItem = res.data.rows;
					})
				})
			}

		},
		mounted() {
			var self = this;
			self.mescroll = new mScroll("mescroll", {
				down: {
					callback: self.downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
				},
				up: {
					callback: self.upCallback, //上拉加载的回调
					isBounce: true //如果您的项目是在iOS的微信,QQ,Safari等浏览器访问的,建议配置此项.解析(必读)
						,
					offset: 50
				}
			});
		},
		filters: {
			fixedTwo(price) {
				if(price) {
					return Number(price / 100).toFixed(2);
				}
				return "0.00";
			}
		}
	}
</script>

<style lang="less" rel="stylesheet/less">
	.find-goodsShelf {
		height: 100%;
		background: #F2F2F2;
		.goods-box {
			height: .88rem;
			overflow-x: auto;
			overflow-y: hidden;
			white-space: nowrap;
			font-size: 0;
			line-height: .88rem;
			background: #fff;
			.goods-warp {
				display: inline-block;
				height: .86rem;
				line-height: .86rem;
				font-size: .3rem;
				color: #909090;
				width: 1.475rem;
				border: none;
				text-align: center;
				white-space: nowrap;
				margin: 0 .2rem;
				padding: 0;
			}
			.active {
				color: #464646;
				border-bottom: 1px solid #fbc200;
			}
		}
		.position-img {
			width: 7.5rem;
			height: 3.62rem;
			img {
				width: 7.5rem;
				height: 3.62rem;
			}
		}
		.find-box {
			.hot {
				width: 7.5rem;
				background: #fff;
				.hot-goods {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					background: #f2f2f2;
					.hot-item {
						margin-top: .2rem;
						background: #fff;
						width: 3.66rem;
						height: 6.34rem;
						position: relative;
						.labs {
							position: absolute;
							top: .1rem;
							right: .1rem;
							z-index: 9;
							span {
								border-radius: .08rem;
								height: .3rem;
								font-size: .2rem;
								color: #fff;
								padding: .04rem .04rem;
								margin-right: .06rem;
							}
						}
						.img-box {
							width: 3.66rem;
							height: 3.66rem;
							border-bottom: 1px solid #f2f2f2;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.info-box {
							padding: .3rem;
							.title {
								font-size: .3rem;
								margin: 0;
								line-height: .4rem;
								width: 100%;
								padding: 0;
								color: #464646;
							}
							.goods-content {
								margin-top: .25rem;
								.price-box {
									font-family: PingFangSC-Regular;
									font-size: .2rem;
									color: #909090;
									height: .3rem;
									line-height: .3rem;
									.price {
										color: #464646;
										font-size: .24rem;
										font-weight: bold;
									}
								}
								.base-price {
									font-size: .16rem;
									color: #909090;
									.base-price-span {
										color: #FF4C5D;
										font-size: .2rem;
									}
								}
								.line {
									text-decoration: line-through;
								}
							}
						}
					}
				}
			}
		}
	}
</style>